import React, { memo, useState, useEffect, useRef } from "react";
import { CommentWrap } from "./style";
import { Mentions } from "antd";
import { getSizeImage, getMonthDayHouMin } from "@/utils/format-utils";
import { NavLink } from "react-router-dom";
import Loading from "@/components/loading";
import { emojiImg } from "@/services/local-data";
import { sendComment } from "@/services/sendComment";
import CommentSpan from "@/components/aboutComment/commentSpan";
import SecondComment from "@/components/aboutComment/secondComment";

export default memo(function Comment(props) {
  const id = props.id;
  const type = props.type;
  const t = props.t;
  const [a, setA] = useState(0);
  const { Option } = Mentions;
  const [page, setPage] = useState(1);
  const mentiosRef = useRef();
  const userInfo = JSON.parse(window.localStorage.getItem("userInfo"));

  const loginHeader =
    userInfo && userInfo.length !== 0 ? userInfo.data.profile : [];
  const userId =
    loginHeader && loginHeader.length !== 0 ? userInfo.data.profile.userId : "";

  const onChange = (value) => {};
  const onSelect = (option) => {};

  const provied = () => {
    setPage(1);
  };

  const next = () => {
    setPage(2);
  };

  const emojiClcik = () => {
    mentiosRef.current.focus();
    if (document.getElementById("emojiDiv").style.display === "none") {
      document.getElementById("emojiDiv").style.display = "block";
    } else {
      document.getElementById("emojiDiv").style.display = "none";
    }
  };

  const gotoInput = (title) => {
    mentiosRef.current.focus();
    if (mentiosRef.current.textarea.selectionStart != null) {
      mentiosRef.current.state.value =
        mentiosRef.current.textarea.value.substring(
          0,
          mentiosRef.current.textarea.selectionStart
        ) +
        "[" +
        title +
        "]" +
        mentiosRef.current.textarea.value.substring(
          mentiosRef.current.textarea.selectionStart
        );
      return;
    }
    mentiosRef.current.state.value =
      mentiosRef.current.textarea.value + "[" + title + "]";
  };

  useEffect(() => {
    setA(1);
  }, [props.comments]);

  document.addEventListener("click", (e) => {
    e.preventDefault();
    if (
      e.target.parentNode.className !== "emojiR" &&
      e.target.parentNode.className !== "emojid" &&
      e.target.parentNode.className !== "emojiImg" &&
      e.target.parentNode.className !== "nextpro" &&
      e.target.parentNode.className !== "page" &&
      e.target.parentNode.className !== "emojiDiv"
    ) {
      if (document.getElementById("emojiDiv") != null) {
        document.getElementById("emojiDiv").style.display = "none";
      }
    }
  });

  const sendCommentAxios = () => {
    sendComment(t, type, id, value).then((res) => {
      if (res.code === 200) {
        props.addNumQ();
      }
    });
  };

  return (
    <CommentWrap>
      {a === 1 ? (
        <>
          <div className="comment-box">
            <span>评论</span>
            <span>
              共{props.comments.length !== 0 ? props.comments.total : ""}条评论
            </span>
          </div>
          <div id="comment-send">
            <img
              className="userHead"
              src={
                loginHeader != null
                  ? loginHeader.avatarUrl
                  : "http://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=50y50"
              }
              alt=""
            />
            <div className="comment-right">
              <Mentions
                style={{ width: "100%", height: "63px", fontSize: "12px" }}
                onChange={onChange}
                onSelect={onSelect}
                autoSize={{ minRows: 2, maxRows: 3 }}
                ref={mentiosRef}
              >
                <Option value="afc163">afc163</Option>
                <Option value="zombieJ">zombieJ</Option>
                <Option value="yesmeck">yesmeck</Option>
              </Mentions>
              <div className="emojiat">
                <div className="emojiR">
                  <i onClick={emojiClcik} className="emoji imgIcon"></i>
                  <div id="emojiDiv" className="emojiDiv emtbg">
                    <div className="emojid">
                      {page === 1
                        ? emojiImg.slice(0, 50).map((item, index) => {
                            return (
                              <span
                                key={index + Math.random()}
                                onClick={() => gotoInput(item.title)}
                                title={item.title}
                                className="emojiImg"
                              >
                                <img src={item.url} alt={item.title} />
                              </span>
                            );
                          })
                        : page === 2
                        ? emojiImg.slice(50, 60).map((item, index) => {
                            return (
                              <span
                                key={index + Math.random()}
                                onClick={() => gotoInput(item.title)}
                                title={item.title}
                                className="emojiImg"
                              >
                                <img src={item.url} alt={item.title} />
                              </span>
                            );
                          })
                        : ""}
                    </div>
                    <div className="nextpro">
                      <div className="page">
                        <i onClick={provied} className="provied btn-button"></i>
                        <em className="pagenum">{page}/2</em>
                        <i onClick={next} className="next btn-button"></i>
                      </div>
                    </div>
                  </div>
                </div>
                <i className="atb imgIcon"></i>
                <div onClick={sendCommentAxios} className="send">
                  评论
                </div>
              </div>
            </div>
          </div>
          {props.comments.length !== 0 ? (
            <div className="comment-best">
              {props.pageNum == 1 ? (
                props.comments.hotComments ? (
                  props.comments.hotComments.length !== 0 ? (
                    <div>
                      <p>精彩评论</p>
                      <div className="comment-best-three">
                        {props.comments.code == 200 &&
                        props.comments.hotComments !== undefined
                          ? props.comments.hotComments.map((item, index) => {
                              return (
                                <div
                                  key={index + Math.random()}
                                  className="hot-comment-box"
                                >
                                  <div className="hot-comment-s-box">
                                    <div>
                                      <NavLink
                                        to={{
                                          pathname: "/user/home",
                                          search: "?id=" + item.user.userId,
                                        }}
                                      >
                                        <img
                                          src={getSizeImage(
                                            item.user.avatarUrl,
                                            50
                                          )}
                                          alt=""
                                        />
                                      </NavLink>
                                    </div>
                                    <div className="hot-comment-s-box-xq">
                                      <NavLink
                                        to={{
                                          pathname: "/user/home",
                                          search: "?id=" + item.user.userId,
                                        }}
                                      >
                                        {item.user.nickname}
                                      </NavLink>
                                      <span>
                                        {item.user.vipRights ? (
                                          <img
                                            className="level"
                                            src={
                                              require("@/assets/img/lv" +
                                                item.user.vipRights
                                                  .redVipLevel +
                                                ".png").default
                                            }
                                            alt=""
                                          />
                                        ) : (
                                          ""
                                        )}
                                        ：
                                      </span>
                                      <span className="hot-comment-content">
                                        &nbsp;
                                        <CommentSpan content={item.content} />
                                      </span>
                                      <SecondComment
                                        beReplied={
                                          item.beReplied != null
                                            ? item.beReplied
                                            : []
                                        }
                                      />

                                      <div className="hot-comment-bb">
                                        <div className="hot-comment-time">
                                          {getMonthDayHouMin(item.time)}
                                        </div>
                                        <div className="hot-comment-dz">
                                          {item.user.userId === userId ? (
                                            <div className="deleteD">
                                              <span className="delete">
                                                删除
                                              </span>
                                              <span className="shu">|</span>
                                            </div>
                                          ) : (
                                            <></>
                                          )}
                                          <i className="dz-icon icon2"></i>
                                          {item.likedCount === 0 ? (
                                            <></>
                                          ) : (
                                            item.likedCount
                                          )}
                                          <span className="shu">|</span>
                                          <span>回复</span>
                                        </div>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              );
                            })
                          : ""}
                      </div>
                    </div>
                  ) : (
                    ""
                  )
                ) : (
                  ""
                )
              ) : (
                ""
              )}
              {props.comments.comments.length !== 0 ? (
                <div className="new-comment-box">
                  <p>
                    最新评论(
                    {props.comments.length !== 0 ? props.comments.total : ""})
                  </p>
                  {props.comments.length !== 0
                    ? props.handCheck
                      ? props.comments.comments
                          .slice(0, 20)
                          .map((item, index) => {
                            return (
                              <div
                                key={index + Math.random()}
                                className="new-comment-box"
                              >
                                <div className="new-comment-s-box">
                                  <div>
                                    <NavLink
                                      to={{
                                        pathname: "/user/home",
                                        search: "?id=" + item.user.userId,
                                      }}
                                    >
                                      <img
                                        src={getSizeImage(
                                          item.user.avatarUrl,
                                          50
                                        )}
                                        alt=""
                                      />
                                    </NavLink>
                                  </div>
                                  <div className="new-comment-s-box-xq">
                                    <NavLink
                                      to={{
                                        pathname: "/user/home",
                                        search: "?id=" + item.user.userId,
                                      }}
                                    >
                                      {item.user.nickname}
                                    </NavLink>
                                    <span>
                                      {item.user.vipRights ? (
                                        <img
                                          className="level"
                                          src={
                                            require("@/assets/img/lv" +
                                              item.user.vipRights.redVipLevel +
                                              ".png").default
                                          }
                                          alt=""
                                        />
                                      ) : (
                                        ""
                                      )}
                                      ：
                                    </span>
                                    <span className="new-comment-content">
                                      &nbsp;
                                      <CommentSpan content={item.content} />
                                    </span>
                                    <SecondComment
                                      beReplied={
                                        item.beReplied != null
                                          ? item.beReplied
                                          : []
                                      }
                                    />
                                    <div className="new-comment-bb">
                                      <div className="new-comment-time">
                                        {getMonthDayHouMin(item.time)}
                                      </div>
                                      <div className="new-comment-dz">
                                        {item.user.userId === userId ? (
                                          <div className="deleteD">
                                            <span className="delete">删除</span>
                                            <span className="shu">|</span>
                                          </div>
                                        ) : (
                                          <></>
                                        )}
                                        <i className="dz-icon icon2"></i>
                                        {item.likedCount === 0 ? (
                                          <></>
                                        ) : (
                                          item.likedCount
                                        )}
                                        <span className="shu">|</span>
                                        <span>回复</span>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            );
                          })
                      : props.comments.comments
                      ? props.comments.comments.map((item, index) => {
                          return (
                            <div
                              key={index + Math.random()}
                              className="new-comment-box"
                            >
                              <div className="new-comment-s-box">
                                <div>
                                  <NavLink
                                    to={{
                                      pathname: "/user/home",
                                      search: "?id=" + item.user.userId,
                                    }}
                                  >
                                    <img
                                      src={getSizeImage(
                                        item.user.avatarUrl,
                                        50
                                      )}
                                      alt=""
                                    />
                                  </NavLink>
                                </div>
                                <div className="new-comment-s-box-xq">
                                  <NavLink
                                    to={{
                                      pathname: "/user/home",
                                      search: "?id=" + item.user.userId,
                                    }}
                                  >
                                    {item.user.nickname}
                                  </NavLink>
                                  <span>
                                    {item.user.vipRights ? (
                                      <img
                                        className="level"
                                        src={
                                          require("@/assets/img/lv" +
                                            item.user.vipRights.redVipLevel +
                                            ".png").default
                                        }
                                        alt=""
                                      />
                                    ) : (
                                      ""
                                    )}
                                    ：
                                  </span>
                                  <span className="new-comment-content">
                                    &nbsp;
                                    <CommentSpan content={item.content} />
                                  </span>
                                  <SecondComment
                                    beReplied={
                                      item.beReplied != null
                                        ? item.beReplied
                                        : []
                                    }
                                  />
                                  <div className="new-comment-bb">
                                    <div className="new-comment-time">
                                      {getMonthDayHouMin(item.time)}
                                    </div>
                                    <div className="new-comment-dz">
                                      {item.user.userId === userId ? (
                                        <div className="deleteD">
                                          <span className="delete">删除</span>
                                          <span className="shu">|</span>
                                        </div>
                                      ) : (
                                        <></>
                                      )}
                                      <i className="dz-icon icon2"></i>
                                      {item.likedCount === 0 ? (
                                        <></>
                                      ) : (
                                        item.likedCount
                                      )}
                                      <span className="shu">|</span>
                                      <span>回复</span>
                                    </div>
                                  </div>
                                </div>
                              </div>
                            </div>
                          );
                        })
                      : ""
                    : ""}
                </div>
              ) : (
                <></>
              )}
            </div>
          ) : (
            ""
          )}
          <div id="tcr">
            {/* <Pagination onChange={changePage} onClick={props.changeComment(pages)} total={props.comments.length!==0?props.comments.comments.length:""} showSizeChanger={false} itemRender={itemRender} /> */}
          </div>
        </>
      ) : (
        <div className="loading">
          <Loading />
        </div>
      )}
    </CommentWrap>
  );
});
